<template>
  <van-popup v-model="show" position="left" @click-overlay="close">
    <div class="personbox pb1" v-if="!isLogin">
      <div class="userbox">
        <div class="img">
          <img :src="imgUser" alt />
        </div>
        <div class="pbox">
          <p class="p1" @click="href('login')">Guest</p>
          <p class="p2" @click="href('login')">Login</p>
        </div>
      </div>
      <div class="listBox">
        <van-cell title="Home" @click="href('/')" :icon="home" />
        <p class="listname">My account</p>
        <van-cell title="Login" @click="href('login')" :icon="login" />
        <p class="listname">Miscellaneous</p>
        <van-collapse v-model="activeNames">
          <van-collapse-item :icon="contact" title="Contact" name="1">
            <ul class="contactBox">
              <li>Contact with Peter</li>
              <li>
                <span class="span1">Tel:</span>
                <a class="span2" :href="'tel:'+vipPhone">{{vipPhone}}</a>
              </li>
              <li>
                <span class="span1">Email:</span>
                <span class="span2">peter@iccsino.com</span>
              </li>
            </ul>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    <div class="personbox pb2" v-else>
      <div class="userbox">
        <div class="img">
          <img :src="imgUser" alt />
        </div>
        <div class="pbox">
          <p class="p1">{{user.truename}}</p>
          <p class="p2">{{user.p_enddate}}</p>
        </div>
      </div>
      <div class="listBox">
        <van-cell title="Home" @click="href('/')" :icon="home" />
        <p class="listname">My account</p>
        <van-cell :icon="login">
          <div slot="title">
            <span
              class="selfSpan"
              v-for="(i,index) in myselect"
              :key="index"
              @click="selfPrice(i)"
            >{{i.text}}</span>
          </div>
        </van-cell>
        <p class="listname">Miscellaneous</p>
        <van-collapse v-model="activeNames">
          <van-collapse-item :icon="contact" title="Contact" name="1">
            <ul class="contactBox">
              <li>Contact with Peter</li>
              <li>
                <span class="span1">Tel:</span>
                <a class="span2" :href="'tel:'+vipPhone">{{vipPhone}}</a>
              </li>
              <li>
                <span class="span1">Email:</span>
                <span class="span2">peter@iccsino.com</span>
              </li>
            </ul>
          </van-collapse-item>
        </van-collapse>
        <van-cell title="Settings" is-link @click="href('/changepsd')" :icon="setting" />

        <van-cell v-if="versonData.flag==0" :icon="bb" :value="versonData.v"></van-cell>
        <van-cell
         v-else-if="versonData.flag==1"
       
        :url="versonData.ulr"
        title-class="red"
        :icon="bb"
        :title="versonData.v+'--update'"
      >
        <van-icon slot="right-icon" name="arrow" class="red" style="line-height: inherit;" />
      </van-cell>
        <van-button color="#e5e5e5cc" type="normal" size="large"  @click="logOff">Log Off</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script type="text/ecmascript-6">
import login from "./menu-login.png";
import home from "./menu-home.png";
import contact from "./menu-contact.png";
import setting from "./menu-setting.png";
import bb from "./bb.png";
import imgUser0 from "../../assets/img/person/man.png";
import imgUser1 from "../../assets/img/person/woman.png";
import imgUser2 from "../../assets/img/person/man.png";
import { loginout, getsoftversion } from "../../api/user";
export default {
  data() {
    return {
      activeNames: [],
      login,
      home,
      bb,
      setting,
      contact,
      isLogin: this.$store.state.islogin, //是否登陆
      imgUser: imgUser0,
      show: this.$store.state.nocaches.personshow,
      user: {},
      vipText: "",
      myselect: [],
      vipPhone: this.$store.state.nocaches.kefuphone,
      versonData: {}
    };
  },
  computed: {
    shows() {
      return this.$store.state.nocaches.personshow;
    },
    userget() {
      return this.$store.state.islogin;
    }
  },
  watch: {
    userget(n, o) {
      console.log(n, o);
      this.isLogin = n;
      this.setLogin();
    },
    shows(n, old) {
      this.show = n;
    }
  },
  methods: {
    logOff() {
      loginout().then(res => {
        if (res.code == "0000") {
          this.$store.dispatch("acLoginInfor", {});
          this.$store.dispatch("acinit");
        } else {
          this.$toast(res.msg);
        }
      });
    },
    href(url) {
      this.close();
      let query = {};
      if (url == "login") {
        query.path = this.$route.path;
      }
      this.$router.push({ path: url, query: query });
    },
    selfPrice(i) {
      let obj = {
        select: {
          text: i.text,
          id: i.channel
        },
        channel: i.channel,
        kname: "",
        specs: ""
      };
      this.$store.dispatch("acpersonShow", false);
      this.$store.dispatch("acpricepartObj", obj);
      window.localStorage.setItem("origin", "person");
      this.$router.push({ path: "pricepart", query: obj });
    },
    setLogin() {
      if (!this.isLogin) {
        this.innitData();
        return;
      } else {
        getsoftversion().then(res => {
          if (res.code === "0000") {
            this.versonData = res.data;
            // this.versonData.flag = "1";
          } else {
            this.$toast(res.mag);
          }
        });
      }

      this.user = this.$store.state.loginInforXl;
      let user = this.user;
      this.vipPhone = this.user.csphone;
      if (user.sex == 1) {
        this.imgUser = imgUser1;
      } else if (user.sex == 2) {
        this.imgUser = imgUser2;
      } else {
        this.imgUser = imgUser0;
      }
      let textArr = [];
      let viptext = [];
      if (user.is_ts == 1) {
        let obj = {
          channel: "tcl",
          text: "Carbon"
        };
        viptext.push(obj.text);
        textArr.push(obj);
      }
      if (user.is_dc == 1) {
        let obj = {
          channel: "dc",
          text: "Battery"
        };
        viptext.push(obj.text);
        textArr.push(obj);
      }
      if (user.is_gt == 1) {
        let obj = {
          channel: "dlg",
          text: "EAF"
        };
        viptext.push(obj.text);
        textArr.push(obj);
      }
      this.vipText = viptext.join(",");
      this.myselect = textArr;
    },
    close() {
      this.$store.dispatch("acpersonShow", false);
    },
    innitData() {
      this.user = {};
      this.vipText = ""; //vip权限
      this.vipPhone = this.$store.state.nocaches.kefuphone;
      this.myselect = [];
      this.imgUser = imgUser0;
    }
  },
  created() {
    this.setLogin();
  }
};
</script>

<style scoped lang="less">
.van-popup--left {
  height: 100%;
  width: 4.4rem;
}
.userbox {
  height: 2.6rem;
  display: flex;
  align-items: center;
  padding-left: 0.3rem;
  background: linear-gradient(
    180deg,
    rgba(59, 157, 255, 1) 0%,
    rgba(0, 126, 255, 1) 100%
  );
  .img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
    margin-right: 0.24rem;
  }
  .p1 {
    font-size: 0.32rem;
    line-height: 0.44rem;
    color: rgba(255, 255, 255, 1);
  }
  .p2 {
    font-size: 0.28rem;
    color: rgba(255, 255, 255, 0.8);
  }
}
.van-cell {
  font-weight: 400;
  color: rgba(46, 80, 96, 1);
}
.listname {
  font-size: 0.34rem;
  font-weight: bolder;
  color: rgba(43, 43, 43, 1);
  line-height: 0.48rem;
  margin-top: 0.4rem;
  padding: 0 15px;
}
.selfSpan {
  margin-right: 0.2rem;
}
.contactBox {
  color: #2e5060;
  li {
    line-height: 0.8rem;
    border-bottom: 0.01rem solid #ebedf0;
    .span2 {
      color: #969799;
    }
  }
}
.van-button {
  height: 40px;
  line-height: 38px;
  margin: 0.4rem 0.7rem;
  width: 3rem;
}
.red {
  color: #d82d27 !important;
}
</style>
